<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${sys.name} + '登录页面'"></title>
    <!-- 引入公用部分 -->
    <script th:replace="head::static"></script>
    <style>
        /*上下左右居中*/
        .main {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 150px;
        }
    </style>
</head>
<body>
<div class="main">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <h1 style="text-align: center" th:text="${sys.name}">XXX系统</h1>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号<i class="layui-icon layui-icon-username"></i></label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" placeholder="请输入账号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码<i class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="text" id="password" name="password" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" class="layui-input" style="float: left;width: 52%">
                <img id="captchaImg" src="" width="90" height="30" onclick="changeCode()"/><!-- <a href="javascript:changeCode()">看不清换一张</a>-->
                <input type="hidden" id="uuid">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" style="margin-left: -50px;margin-right: 50px;" onclick="formSubmit()">登录</a>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script th:inline="javascript">
    //获取后端RSA公钥并存到sessionStorage
//    sessionStorage.setItem('javaPublicKey', [[${publicKey}]]);
    function formSubmit() {
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
//            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : api + "/auth/loginWithcode",
            //数据，json字符串
            data : {
                loginname: $("#username").val(),
                password: $("#password").val(),
                code: $("#captcha").val(),
                uuid: $("#uuid").val(),
            },
            //请求成功
            success : function(data) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    if (data.code == 200) {
                        layer.msg(i18n('user.login.success'), {icon: 1,time: 1000}, function () {
//                            localStorage.setItem("token",data.data);
                            $.cookie("token", data.data);
                            window.location.href = ctx + '/manage/main';
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2,time: 2000}, function () {});
                    }
                });
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    function changeCode() {
        $.get(api + "/auth/captchaImage", {
        }, function (data) {
            if (data.code == 200) {
                $('#captchaImg').attr('src',"data:image/jpg;base64," + data.data.img);
                $('#uuid').val(data.data.uuid);
            }
        })
    }
    $(function() {
        changeCode();
    })
</script>
</html>